<template>
	<view class="container">

		<view class="content">
			<view class="how-to-use">
				<view class="article">
					小镜界订单为预制订单，客户下单后可选择至店配镜享受线下配镜服务。也可直接让店家配好直接快递上门！
				</view>
			</view>
			
			<view class="use-description">
				<view class="title">小境界配镜和其它线上配镜有何区别？</view>
				<view class="article">小境界中的店铺全部拥有线下实体店，客户线上下单，可至线下门店验光配镜。</view>
				<view class="title">小镜界订单操作流程？</view>
				<view class="article" style="text-indent: 0px;">
					①客户线上预览下单。
					<br>
					②商家收到订单后跟客户预约上门配镜时间
					<br>
					③在预定时间内，客户到商家验光配镜。
					<br>
					④客户拿到眼镜后，可以对订单进行评价。
					
				</view>
				<view class="title">特别声明</view>
				<view class="article">用户在下单的时候要挑选好自己的度数、品牌等参数，挑选的配置不同价格也不相同。到实体店验光的时候特殊镜片价格和订单有差异，线下补差价
				属于正常情况！如若，质疑加价不满意可以放弃订单联系平台退款！</view>
				<view class="title">其他说明</view>
				<view class="article">用户对订单的评价很重要，好的服务店家我们予以排名靠前支持，差的服务，我们予以矫正和处罚直至注销店铺。请广大镜友予以监督！</view>
			</view>
		</view>
		<view class="footer" :class="{'show':footerShow}">
			<view class="agreement" @tap="agree=!agree">
				<image :src="!agree?'/static/images/common/gouxuankuang.png':'/static/images/common/round-black-selected.png'"></image>
				<view>同意《小镜界服务章程》</view>
			</view>
			<button type="info" :disabled="!agree" @tap="open">开始使用</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				agree: false,
				footerShow: false
			}
		},
		onPageScroll({scrollTop}) {
			let top
			// #ifdef H5
			top = 66
			// #endif
			// #ifndef H5
			top = 100
			// #endif
			
			this.footerShow = scrollTop >= top ? true : false
		},
		methods: {
			open() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
page {
	background-color: $bg-color-white;
}

.container {
	height: auto;
	font-size: $font-size-base;
	color: $text-color-assist;
	line-height: 1.2rem;
	padding-bottom: 200rpx;
}

.toutu {
	padding: 100rpx 30rpx;
}
.content {
	padding: 0 40rpx;
}

.how-to-use {
	margin-bottom: 100rpx;
	
	.article {
		margin-bottom: 60rpx;
		text-indent: 32px;
	}
}

.biaoti-box {
	padding: 60rpx 0;
	display: flex;
	justify-content: center;
	align-items: center;
	
	.biaoti {
		width: 320rpx;
	}
}

.use-description {
	.title {
		color: $text-color-base;
		margin: 20rpx 0;
		display: list-item;
		list-style-type: disc;
		list-style-position: inside;
		font-weight: 500;
	}
	
	.article {
		marign: 10rpx 0;
		text-indent: 32px;
	}
}

.footer {
	z-index: 10;
	background-color: $bg-color-white;
	position: fixed;
	bottom: -200rpx;
	width: 100%;
	height: 200rpx;
	padding: 20rpx 30rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	font-size: $font-size-sm;
	color: $text-color-assist;
	border-top: 1rpx solid rgba($color: $border-color, $alpha: 1.0);
	transition: all 1s cubic-bezier(0, 1, 0.5, 1);
	
	&.show {
		bottom: 0;
	}
	
	.agreement {
		display: flex;
		align-items: center;
		
		image {
			width: 30rpx;
			height: 30rpx;
			margin-right: 10rpx;
		}
	}
	
	button {
		font-size: $font-size-lg;
		line-height: 3.2;
	}
}
</style>
